<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example1">
			
			<div :style="{fontSize:postFontSize+'em'}">
				<blog-component v-for="e in posts" v-bind:key="e.id"
				 v-bind:post="e"
				 v-on:enlarge-text="onEnlrageText"
				 >
				 </blog-component>
			</div>
			
			
			<div>
				
				<custom-input v-model="searchText"></custom-input>

			</div>
		</div>	
		<!-- 
		通过prop 向组件传递数据
		当然prop 也可以传递对象过去
		监听组件事件
		
		组件内里的内容里面通过$emit方法调用组件上绑定的方法，处理逻辑
		 -->
		<script type="text/javascript">
			
			Vue.component('custom-input', {
			  props: ['value'],
			  template: `
			    <input
			      v-bind:value="value"
			      v-on:input="$emit('input', $event.target.value)"
			    >
			  `
			})
			
			Vue.component('blog-component',{
				props:['post'],
				template:`
				<div class="blog-post">
					<h3>{{post.title}}</h3>
					<button v-on:click="$emit('enlarge-text',0.1)">
						Enlarge text
					</button>
					<div v-html="post.content"></div>
				</div>
				`
			})
			let app=new Vue({
				el:'#example1',
				data:{
					counter:0,
					enterValue:'',
					postFontSize:1,
					searchText:'',
					 posts: [
					      { id: 1, title: 'My journey with Vue',content:'My journey with Vue' },
					      { id: 2, title: 'Blogging with Vue',content:'Blogging with Vue' },
					      { id: 3, title: 'Why Vue is so fun',content:'Why Vue is so fun' }
					    ],
					
				},
				methods:{
					onEnlrageText:function(value){
						this.postFontSize+=value;
					}
				}
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
